<template>
  <div class="layouts">
    <div
      class="widget"
      v-for="widget in store.widgetList"
      :key="widget.widget"
      @dragstart="dragStart(widget)"
      @dragover="allowDrop($event, widget)"
      @dragend="dragend($event)"
      draggable="true"
    >
      <div
        class="widgetItem"
        :class="{
          hoverTopLine: hoverUUID === widget.uuid && hoverType === 'top',
          hoverBottomLine: hoverUUID === widget.uuid && hoverType === 'bottom',
        }"
      >
        <div class="icon">
          <svg class="icon svg-icon" aria-hidden="true">
            <use :xlink:href="widget.icon" />
          </svg>
        </div>
        <div class="widgetName">{{ getLayerName(widget) }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useStore } from "@/store/index";
const store = useStore();
const dragingWidget = ref<widgetConfig | null>(null);
const hoverUUID = ref<string | undefined>();
const hoverType = ref<string | null>(null);

function getLayerName(widget: widgetConfig) {
  if (widget.uuid) {
    return store.widgetConfig[widget.uuid].layerName;
  }
}

function dragStart(widget: widgetConfig) {
  console.log("dragStart");
  // 记录拖拽的数据
  dragingWidget.value = widget;
}

function allowDrop(event: DragEvent, widget: widgetConfig) {
  // 判断在上半部分还是下班部分
  if (!event.target) return;
  const { offsetY } = event;
  if ((event.target as HTMLElement).className.includes("widgetItem")) {
    // 获取高度并判断在上半部分还是下半部分
    const { height } = (event.target as HTMLElement).getBoundingClientRect();
    if (offsetY > height / 2) {
      hoverType.value = "bottom";
      hoverUUID.value = widget.uuid;
    } else {
      hoverType.value = "top";
      hoverUUID.value = widget.uuid;
    }
  }
}

function dragend(event: DragEvent) {
  if (!hoverUUID.value || !hoverType.value || !dragingWidget.value) {
    return;
  };
  if (hoverUUID.value === dragingWidget.value.uuid) {
    hoverUUID.value = undefined;
    hoverType.value = null;
    return;
  };
  // 阻止默认事件
  event.preventDefault();
  const widget = dragingWidget.value;
  if (widget) {
    // 更改widgetList中元素位置
    const hoverIndex = store.widgetList.findIndex(
      (item) => item.uuid === hoverUUID.value
    );
    const dragIndex = store.widgetList.findIndex(
      (item) => item.uuid === widget.uuid
    );
    if (hoverType.value === "top") {
      store.widgetList.splice(hoverIndex, 0, widget);
      store.widgetList.splice(dragIndex + 1, 1);
    } else {
      store.widgetList.splice(hoverIndex + 1, 0, widget);
      store.widgetList.splice(dragIndex, 1);
    }
  }
  hoverUUID.value = undefined;
}
</script>

<style lang="less">
.layouts {
  margin-top: -10px;
  .widget {
    color: #333;
    text-align: center;
    cursor: pointer;
  }
  .widgetItem {
    display: flex;
    padding-left: 30px;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
    .icon {
      width: 30px;
      height: 30px;
    }
    .widgetName {
      height: 30px;
      line-height: 30px;
      margin-left: 30px;
    }
  }
  .hoverTopLine {
    border-top: 2px solid #2c9bf6;
  }
  .hoverBottomLine {
    border-bottom: 2px solid #2c9bf6;
  }
}
</style>
